<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { toast } from '@/utils/utils'
import { addLogoutRecord } from '@/api/user'
import { logoutAccountApi } from '@/api/logout-last'

const reason = ref('')
const phone = ref('')
const idCard = ref('')
const idCardFront = ref('')
const userPhoto = ref('')
const idCardNo = ref('')

function onToCamera(type: string) {
    let url = '/package-mine/pages/camera/camera'
    if (type === 'front')
        url += '?bgType=front'

    uni.navigateTo({
        url,
        events: {
            base64: async (data: {
                base64: string
            }) => {
                if (!data.base64)
                    return
                if (type === 'front')
                    idCardFront.value = data.base64
                else if (type === 'normal')
                    userPhoto.value = data.base64
            },
        },
    })
}

function onSubmit() {
    console.log('提交')
    if (!phone.value) {
        toast('请输入手机号')
        return
    }
    if (!idCard.value) {
        toast('请输入身份证号')
        return
    }
    if (phone.value?.length !== 11) {
        toast('请输入正确的手机号')
        return
    }
    // if (!reason.value) {
    //     toast('请输入申诉原因')
    //     return
    // }
    // if (!idCardFront.value) {
    //     toast('请上传身份证正面照片')
    //     return
    // }
    // if (!userPhoto.value) {
    //     toast('请上传本人照片')
    //     return
    // }
    handleAdd()
}

async function handleAdd() {
    const res = await addLogoutRecord({
        idCardNo: idCard.value,
        phone: phone.value,
    })
    if (res)
        await logoutAccountApi({ idCardNo: idCard.value })
    const status: string = res ? '0' : '2'
    uni.redirectTo({
        url: `/pages/appeal-status/appeal-status?status=${status}`,
    })
}

onLoad((options) => {
    idCardNo.value = options?.idCardNo
})
</script>

<template>
    <NavbarContainer title="申诉">
        <view class="box-border min-h-100vh w-full bg-#f9f9fa px-32rpx py-24rpx pb-200rpx">
            <view class="mb-24rpx flex items-center gap-20rpx rounded-16rpx bg-#ffffff px-20rpx py-40rpx">
                <view class="w-200rpx text-28rpx">号码验证</view>
                <input v-model="phone" class="flex-1 text-32rpx" type="tel" placeholder="请输入上一个绑定的手机号">
            </view>
            <view class="mb-24rpx flex items-center gap-20rpx rounded-16rpx bg-#ffffff px-20rpx py-40rpx">
                <view class="w-200rpx text-28rpx">身份证验证</view>
                <input v-model="idCard" class="flex-1 text-32rpx" type="idcard" placeholder="请输入您的身份证号">
            </view>
            <!--            <view class="rounded-16rpx bg-#ffffff px-20rpx py-40rpx"> -->
            <!--                <view class="mb-20rpx text-28rpx">申诉原因</view> -->
            <!--                <view class="mb-40rpx box-border h-300rpx w-full rounded-16rpx bg-#FAFAFC p-28rpx"> -->
            <!--                    <textarea v-model="reason" class="h-200rpx text-24rpx" :maxlength="-1" placeholder="请详细描述您的申诉原因" /> -->
            <!--                </view> -->
            <!--                <view class="mb-20rpx text-28rpx">上传图片</view> -->
            <!--                <view class="box-border w-full flex items-center gap-24rpx"> -->
            <!--                    <view -->
            <!--                        class="box-border h-200rpx flex-1 border-2rpx border-#9497B1 rounded-12rpx border-dashed bg-#FAFAFC p-24rpx" -->
            <!--                        @click="onToCamera('front')"> -->
            <!--                        <image -->
            <!--                            :src="idCardFront ? `data:image/png;base64,${idCardFront}` : 'https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager646bf448-c829-411c-9389-e123533afa74.png'" -->
            <!--                            class="h-full w-full" mode="scaleToFill" /> -->
            <!--                    </view> -->
            <!--                    <view -->
            <!--                        class="box-border h-200rpx flex-1 border-2rpx border-#9497B1 rounded-12rpx border-dashed bg-#FAFAFC p-24rpx" -->
            <!--                        @click="onToCamera('normal')"> -->
            <!--                        <view v-if="!userPhoto" class="h-full w-full flex flex-col items-center justify-center"> -->
            <!--                            <image class="h-48rpx w-48rpx" -->
            <!--                                   src="https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManager8b5c8434-7bc1-4280-8aee-26a56b2258b9.png" -->
            <!--                                   mode="scaleToFill" /> -->
            <!--                            <view class="text-24rpx text-#9497B1">上传本人照片</view> -->
            <!--                        </view> -->
            <!--                        <image v-else :src="`data:image/png;base64,${userPhoto}`" class="h-full w-full" -->
            <!--                               mode="scaleToFill" /> -->
            <!--                    </view> -->
            <!--                </view> -->
            <!--            </view> -->
            <view class="pos-fixed bottom-0 left-0 box-border h-200rpx w-full bg-#FFFFFF px-30rpx pt-24rpx">
                <view
                    class="box-border h-88rpx flex items-center justify-center rounded-44rpx bg-primary text-32rpx text-#ffffff"
                    @click="onSubmit">
                    提交
                </view>
            </view>
        </view>
    </NavbarContainer>
</template>

<style scoped></style>

<route lang="json">
{
"style": {
"navigationBarTitleText": "申诉"
}
}
</route>
